<template>
  <div :class="prefixCls" ref="footerRef">
    <div :class="`${prefixCls}__links`">
      <span>Copyright © 2022 - {{ year }} </span>
      <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a>

      <GithubFilled @click="openWindow(GITHUB_URL)" :class="`${prefixCls}__github`" />
      <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
    </div>
		
    <div :class="`${prefixCls}__links`">
      <a target="_blank" :href="getPlatformConfig().govUrl" >
        <img src="/gongan.png"/>
        <span>{{ getPlatformConfig().govRecord }} </span>
      </a>
      <a href="https://beian.miit.gov.cn/" target="_blank">{{ getPlatformConfig().icp }}</a>
    </div>
  </div>
</template>

<script lang="ts" setup name="LoginFooter">
  import { ref, onMounted } from 'vue';
  import { GithubFilled } from '@ant-design/icons-vue';
  import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
  import { openWindow } from '/@/utils';
  import { getPlatformConfig } from '/@/utils/cache/module'
  import { formatToDate } from '/@/utils/dateUtil'
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';

  const { t } = useI18n();
  const { prefixCls } = useDesign('layout-footer');

  const year = ref(formatToDate(new Date(), 'YYYY'))
  const footerRef = ref<ComponentRef>(null);
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-layout-footer';

  // @normal-color: rgba(0, 0, 0, 0.45);
  @footer-normal-color: #939393;

  @hover-color: #1890ff;

  .@{prefix-cls} {
    color: @footer-normal-color;
    float: right;
    position: absolute;
    text-align: center;
    bottom: 2%;
    left: 58%;
    transform: translate(-20%, -20%);
    width: 500px;
    @media (max-width: @screen-xl) {
      left: 50%;
      /* 50%为自身尺寸的一半 */
      transform: translate(-50%, -50%);
    }

    &__links {
      a {
        img {
          width: 20px;
          display: inline-block;
          height: 20px;
          margin: 5px;
        }

        color: @footer-normal-color;
        margin: 5px 10px 5px 5px; 
        &:hover {
          color: @hover-color;
        }
      }
    }

    &__github {
      margin: 0 10px;

      &:hover {
        color: @hover-color;
      }
    }
  }
</style>
